<template>
	<div class="basic">
		<el-form :model="form" :rules="rules" ref="ruleForm" label-width="150px">
			<div class="container add_edit">
				<h3 class="margin_b_20">基本信息</h3>
				<div>
					<el-form-item label="活动名称" prop="name" ref="name">
						<el-input placeholder="请输入活动名称" v-model="form.name" clearable></el-input>
					</el-form-item>
					<el-form-item label="价格" prop="price" ref="price">
						<el-input v-model="form.price" placeholder="请输入原价" type="number" min="0" clearable></el-input>
					</el-form-item>
					<el-form-item label="库存" prop="stock_num" ref="stock_num">
						<el-input v-model.number="form.stock_num" placeholder="请输入库存" type="number" :min="0" clearable
							oninput="value = parseInt(value)">
						</el-input>
					</el-form-item>
					<el-form-item label="限购量" prop="limit" ref="limit">
						<el-input v-model.number="form.limit" placeholder="请输入限购量" type="number" :min="0" clearable
							oninput="value = parseInt(value)">
						</el-input>
						<div class="remark_txt">0为不限购</div>
					</el-form-item>
					<el-form-item label="回传" prop="callback_count" ref="callback_count">
						<el-input v-model="form.callback_count" placeholder="英文逗号隔开">
						</el-input>
						<div class="remark_txt">0,1,2,3,4,5,6,7,8,9</div>
					</el-form-item>
				</div>
			</div>
			<div class="container add_edit">
				<h3 class="margin_b_20">券信息</h3>
				<button class="uni-button" type="default" size="mini" @click="addCoupon()">新增</button>
				<uni-table>
					<uni-tr>
						<uni-th align="center">名称</uni-th>
						<uni-th align="center">消费金额</uni-th>
						<uni-th align="center">优惠金额</uni-th>
						<uni-th width="204" align="center">操作</uni-th>
					</uni-tr>
					<uni-tr v-for="(item,index) in form.coupon_data" :key="index">
						<uni-td align="center"> {{item.name}} </uni-td>
						<uni-td align="center"> {{item.user_money}} </uni-td>
						<uni-td align="center"> {{item.money}} </uni-td>
						<uni-td align="center">
							<view class="uni-group">
								<button @click="confirmDelete(index)" class="uni-button" size="mini"
									type="warn">删除</button>
							</view>
						</uni-td>
					</uni-tr>
				</uni-table>
			</div>
		</el-form>
		<uni-popup ref="popup" background-color="#fff" style="width: 1000px;padding: 40px;">
			<uni-forms ref="gradeForm" labelWidth="100">
				<uni-forms-item name="name" style="padding:10px 10px 0px 10px;" label="名称" required>
					<uni-easyinput placeholder="名称" v-model="couponData.name" style="width: 200px;" />
				</uni-forms-item>
				<uni-forms-item style="padding: 0px 10px 0px 10px;" name="user_money" label="消费金额" required>
					<uni-easyinput placeholder="消费金额" type="number" v-model="couponData.user_money" />
				</uni-forms-item>
				<uni-forms-item style="padding: 0px 10px 0px 10px;" name="money" label="优惠金额" required>
					<uni-easyinput placeholder="优惠金额" type="number" v-model="couponData.money" />
				</uni-forms-item>
			</uni-forms>
			<view class="uni-button-group" style="margin-bottom: 20px;">
				<button type="primary" class="uni-button" style="width: 100px;" @click="submitCoupon">提交</button>
				<button class="uni-button" style="width: 100px;margin-left: 10px;" @click="closedPopup">关闭</button>
			</view>
		</uni-popup>
	</div>
</template>

<script>
	export default {
		data() {
			const validatePrice = async (rule, value, callback) => {
				if (value === 0) {
					return callback(new Error('价格不能为0'));
				}

				if (!value || value < 0) {
					return callback(new Error('请输入价格'));
				}

				callback();
			};

			const validateVipPrice = async (rule, value, callback) => {
				if (this.form.is_vip == '是' && value === 0 && !this.sku) {
					return callback(new Error('VIP价不能为0'));
				}

				if (this.form.is_vip == '是' && (!value || value < 0) && !this.sku) {
					return callback(new Error('请输入VIP价'));
				}

				callback();
			};
			return {
				categoryOptions: [],
				goodsDatas: [],
				serveDatas: [],
				goodsTags: [],
				serveTags: [],
				couponData: {},
				form: {
					cid: '',
					cids: [],
					sort: 0,
					name: '',
					price: 0,
					limit: 0,
					stock_num: 0,
					coupon_data: [],
					callback_count: 0
				},
				rules: {
					name: [{
						required: true,
						message: '请输入活动品名称',
						trigger: 'change'
					}],
					price: [{
						required: true,
						validator: validatePrice,
						trigger: 'change'
					}],
					stock_num: [{
						required: true,
						message: '请输入库存',
						trigger: 'change'
					}],
				}
			};
		},
		methods: {
			setChildren(res) {
				res.forEach(item => {
					if (item.children && item.children.length <= 0) {
						item.children = null;
						return;
					}

					this.setChildren(item.children);
				});
			},
			setBaseData(res) {
				this.setChildren(res[0].datas);
				this.categoryOptions = res[0].datas;

				this.goodsTags = res[1].datas.filter(x => x.type == '商品' && x.state == '启用');
				this.serveTags = res[1].datas.filter(x => x.type == '服务' && x.state == '启用');
			},
			setSort(res) {
				this.form.sort = ++res;
			},
			submitData(callback) {
				this.$refs.ruleForm.validate((valid, obj) => {
					this.$api.set_unvalidated_form_focus(this, obj);
					if (valid) {
						this.form.search_tags = this.goodsDatas;
						this.form.tags = this.serveDatas;

						if (typeof callback === 'function') {
							callback(this.form, valid);
						}
					} else {
						if (typeof callback === 'function') {
							callback(this.form, valid);
						}
						return false;
					}
				});
			},
			getData(callback) {
				this.submitData(callback);
			},
			setData(data) {
				data.search_tags = data.search_tags || [];
				data.tags = data.tags || [];
				data.cids = data.cids || [];

				this.goodsDatas = data.search_tags.filter(x => this.goodsTags.find(t => t.name == x));
				this.serveDatas = data.tags.filter(x => this.serveTags.find(t => t.name == x));
				this.form.cid = data.cid;
				data.rebate_ratio = data.rebate_ratio || 0;
				data.vip_price = data.vip_price || 0;

				for (const key in this.form) {
					if (this.form.hasOwnProperty(key) && key != 'cid') {
						this.form[key] = data[key];
					}
				}
			},
			addCoupon(item) {
				this.couponData = {}
				this.showPopup()
			},
			showPopup() {
				this.$refs.popup.open()
			},
			submitCoupon() {
				this.form.coupon_data.push(this.couponData)
				this.closedPopup()
			},
			closedPopup() {
				this.$refs.popup.close()
			},
			confirmDelete(index) {
				this.form.coupon_data = this.form.coupon_data.splice(0, index)
			}
		},
		mounted() {

			const ele = document.querySelector('.el-tabs__content');

			this.$nextTick(() => {
				ele.addEventListener('scroll', () => {
					if (this.$refs.cascaderObj && this.$refs.cascaderObj.dropDownVisible) {
						this.$refs.cascaderObj.dropDownVisible = false;
					}
					if (this.$refs.datetime && this.$refs.datetime.pickerVisible) {
						this.$refs.datetime.pickerVisible = false;
					}
				});
			});
		}
	};
</script>

<style>
	.cascader {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		padding-left: 44px;
		z-index: 99;
	}

	.checkbox.el-checkbox {
		width: 54px;
	}
</style>